<template>
  <div class="content">
    <div>
      <div class="title" style="display: flex;justify-content: space-between;margin-top: 10px;">
        <div>
          本月检测总概括
        </div>
        <div @click="goMap()" v-if="show" style="margin-right: 20px;cursor: pointer;">地区查询</div>
      </div>
      <div id="rose">
        <div class="digital-flop-item" v-for="item in Data" :key="item.title">
          <div class="digital-flop">
            <dv-digital-flop :config="item.number" :key="key" />
            <div class="unit" v-if="item.title !== '异常率' && item.unit !== '地区'">{{ item.unit }}</div>
            <div class="unit1" style="font-size: 25px;" v-if="item.title === '异常率'">{{ item.unit }}</div>
            <div class="unit2" style="font-size: 25px;" v-if="item.unit === '地区'">{{ item.unit }}</div>
          </div>
          <div class="digital-flop-title">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div>
      <div class="title" style="display: flex;justify-content: space-between;">
        <div>实时监控</div>
        <div @click="goMore()" style="margin-right: 20px;cursor: pointer;">更多>></div>
      </div>
      <div id="rose">
      </div>
      <el-dialog title="监控页面" append-to-body style="z-index: 99999;" :visible.sync="dialog" width="60%">
        <el-form align="center" size="medium">
          <el-form-item prop="marketAffiliationId">
            <el-select @change="handleChange" style="width: 40%;" filterable v-model="queryParams.marketAffiliationId"
              placeholder="请选择市场" clearable>
              <el-option v-for="dict in affiliationList" :key="dict.id" :label="dict.name" :value="dict.id" />
            </el-select>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <el-dialog title="地区查询" class="areaSearch" append-to-body style="height: 680px;" :visible.sync="mapDialog"
      width="60%">
      <el-button type="info" plain @click="taiyuan()">太原市</el-button>
      <div id="app">
        <TaiyuanMap @mapClick="handleMapClick" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as AffiliationCategoryApi from '@/api/market/AffiliationCategory';
import TaiyuanMap from './TaiyuanMap.vue';
export default {
  components: { TaiyuanMap },
  name: 'myarea',
  props: {
    monthTotalNum: [],
    myarea: '',
    areaName: '',
    show: ''
  },
  data() {
    return {
      Data: [],
      key: 1,
      dialog: false,
      queryParams: {
        marketAffiliationId: ''
      },
      affiliationList: [],
      mapDialog: false,
    }
  },
  watch: {
    monthTotalNum() {
      this.createData()
    },
  },
  methods: {
    async getaffiliationList() {
      const affiliationList = await AffiliationCategoryApi.getAffiliationCategorylist();
      console.log(affiliationList, '市555场')
      this.affiliationList = affiliationList.data
    },
    handleChange(value) {
      console.log(value)
    },
    pieOutlineFunc() {
      var _this = this
      window.addEventListener('resize', function (e) {
        _this.$nextTick(() => {
          console.log(_this.$refs.pie2)
          _this.key++
        })
      })
    },
    goMore() {
      this.dialog = true
      this.getaffiliationList()
    },
    // 显示地图弹窗
    goMap() {
      this.mapDialog = true;
    },
    handleMapClick(areaId, name) {
      console.log(areaId, name, '拿到的code')
      this.$emit('mapclik', areaId, name);
      this.mapDialog = false;
    },
    taiyuan() {
      const areaId = '';
      const name = '太原市';
      this.areaName = '太原市';
      this.$emit('mapclik', areaId, name);
      this.mapDialog = false;
    },
    createData() {
      this.Data = [
        {
          title: this.areaName,
          unit: '地区'
        },
        {
          title: '检测数',
          number: {
            number: [this.monthTotalNum.monthCheckNum],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#f46827',
              fontWeight: 'bold'
            }
          },
          unit: '批次'
        },
        {
          title: '异常样本',
          number: {
            number: [this.monthTotalNum.monthNoPassNum],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#FF0000',
              fontWeight: 'bold',
            }
          },
          unit: '批次'
        },
        {
          title: '异常率',
          number: {
            number: [this.monthTotalNum.noPassNumPersent],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#FF0000',
              fontWeight: 'bold'
            }
          },
          unit: '‰'
        },

      ]
    },
  },
}
</script>

<style lang="less">
.content {
  height: 100%;
  padding-top: 5px;
  background-color: rgba(6, 30, 93, 0.5);
  box-sizing: border-box;

  .title {
    margin: 0 0 0 20px;
    font-size: 14px;
    font-weight: bolder;
  }

  #rose {
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .digital-flop-item {
      width: 49%;
      height: 20%;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-left: 3px solid rgb(6, 30, 93);
      border-right: 3px solid rgb(6, 30, 93);
    }

    .digital-flop-title {
      font-size: 14px;
      margin-bottom: 5px;
    }

    .digital-flop {
      display: flex;
      margin-right: 25%;
    }

    .unit {
      width: 40px;
      margin-left: 10px;
      display: flex;
      align-items: flex-end;
      box-sizing: border-box;
      padding-bottom: 5px;
    }

    .unit2 {
      width: 80px;
      margin-left: 10px;
      display: flex;
      align-items: flex-end;
      box-sizing: border-box;
      padding-bottom: 5px;
    }

    .unit1 {
      margin-left: 10px;
      display: flex;
      align-items: flex-end;
      box-sizing: border-box;
      padding-bottom: 13px;
      color: #FF0000;
    }
  }
}
</style>
